<template>
  <div class="dmform-treecascader" :class="{'dmform-treecascader-m': multiple}">
    <div class="_btns_left">
      <span class="global-red">共选择了 {{checkedCount}} 条数据</span>
    </div>
    <div class="_btns">
      <a-button @click.stop="doReset">重置</a-button>
      <a-button @click.stop="doClear">清空</a-button>
      <a-button @click.stop="doCancel">取消</a-button>
      <a-button type="primary" @click.stop="doConfirm">确定</a-button>
    </div>
    <div class="_result">
      <template v-if="valueArray && valueArray.length>0">
        <div v-for="(row1) in valueArray" :key="row1.id">
          <span v-if="row1.children.length" class="_group">{{row1.name}}：</span>
          <a-tag v-for="(row2) in row1.children" :key="row1.id + row2.id" color="blue" :visible="true" :closable="true"
                 @close="doRemove(row1.id, row2.id)">
            {{ row2.name }}
          </a-tag>
        </div>
      </template>
      <span v-else class="_nodata">暂无选中的数据</span>
    </div>
    <table>
      <tr>
        <td style="width:50%">
          <div class="_panel1">
            <div v-if="panel1.title" class="_panel_header">{{ panel1.title }}</div>
            <div :style="{height:height+'px'}" style="overflow: auto;">
              <TreeSelect :dataUrl="panel1.dataUrl"
                          :emptyText="panel1.emptyText"
                          :queryParams="panel1Params"
                          @onNodeClick="doPanel1NodeClick">
              </TreeSelect>
            </div>
          </div>
        </td>
        <td style="width:50%">
          <div class="_panel2">
            <div v-if="panel2.title" class="_panel_header">{{ panel2.title }}</div>
            <div :style="{height:height+'px'}" style="overflow: auto;">
              <TreeSelect
                  :dataUrl="panel2.dataUrl"
                  :emptyText="panel2.emptyText"
                  :queryParams="panel2Params"
                  :multiple="multiple"
                  :value="checkedKeys2"
                  @onNodeClick="doPanel2NodeClick"
                  @onCheckChange="doPanel2CheckChange">
              </TreeSelect>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import TreeCascaderJS from './TreeCascader.js'
import TreeSelect from '../TreeSelect'
export default {
  name: 'TreeCascader',
  mixins: [TreeCascaderJS],
  components: {TreeSelect}
}
</script>
